<div id="content_header">
  <h3>Scheduling a new Make Up Test</h3>
</div>

<div class="row" ng-hide="mtNew.Enrollment.Id">
  <form role="form" ng-submit="searchStudent()">
    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" id="" placeholder="Input Student ID or Student Name and press enter to search" ng-model="paramsStudent.keyword">
        <span class="input-group-btn">
          <button type="submit" class="btn btn-primary"><i class="simple-icon-magnifier"></i> Search</button>
        </span>
      </div>
    </div>
  </form>
</div>

<div class="row" ng-hide="mtNew.Enrollment.Id">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>SID</th>
      </tr>
    </thead>
    <tbody>
      <tr dir-paginate="student in students | itemsPerPage: pagesizeStudent" total-items="totalItemsStudent">
        <td>
          <a href ng-bind-html="student.FullName | makeBold:paramsStudent.keyword" ng-click="chooseThis(student.Enrollment.Id)"></a>
          <!-- <a href ng-bind-html="student.FullName | makeBold:paramsStudent.keyword" ng-click="chooseThis(student.Enrollment.Id)" ng-if="student.Enrollment.Id"></a> -->
          <!-- <span ng-bind-html="student.FullName | makeBold:paramsStudent.keyword" ng-hide="student.Enrollment.Id"></span> -->
        </td>
        <td ng-bind-html="student.SID | makeBold:paramsStudent.keyword"></td>
      </tr>
    </tbody>
  </table>
  <dir-pagination-controls on-page-change="pageChangedStudent(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
</div>

<div class="row">
  <form ng-show="mtNew.Enrollment.Id" name="mtForm" role="form" ng-submit="addMT()">

    <div class="form-group">
      <label for="">Student</label>
      <span class="form-control">{{ mtNew.Enrollment.Student.FullName }} <small><a href="" ng-click="resetStudent()">Change Student</a></small></span>
    </div>

    <div class="form-group">
      <label for="enrollment">Enrollment</label>
      <select name="enrollment" id="enrollment" class="form-control" ng-options="enrollment.Id as (enrollment.CourseSchedule.Course.CourseLevel.Code+ '/' +enrollment.CourseSchedule.Suffix + '/' +TeacherTypes[enrollment.CourseSchedule.Course.TeacherType].Code) for enrollment in enrollments" ng-model="mtNew.Enrollment.Id">
      </select>
    </div>

    <div class="form-group">
      <label for="MakeUpTestType">Make Up Test Type</label>
      <dl ng-repeat="type in MakeUpTestTypes">
        <dt>
          <label><input type="checkbox" ng-value="type.Id" ng-model="mtTypes[type.Id]" ng-change="changeType(type)"> {{ type.Label }} </label>
        </dt>
        <dd ng-show="mtTypes[type.Id]">

          <div class="form-group">
            <label for="scheduleType">Schedule Type</label>
            <br>
            <label ng-repeat="sType in ScheduleTypes"><input type="radio" name="scheduleType[{{type.Id}}]" ng-value="sType.Id" ng-model="$parent.scheduleType[type.Id]" ng-change="changeSchedule(sType, type.Id)"> {{ sType.Label }} </label>
          </div>

          <div class="form-group">
            <label for="class[type.Id]">Schedule</label>
            <select name="class[type.Id]" id="class[type.Id]" class="form-control" ng-options="mtSchedule.Id as label(mtSchedule) for mtSchedule in makeUpTestSchedules" ng-model="scheduleTemp[type.Id].Id" ng-show="scheduleType[type.Id] == 0">
              <option value="" ng-hide="scheduleTemp[type.Id].Id > 0">Please Select a Schedule</option>
            </select>
            <dl ng-show="scheduleType[type.Id] == 1">
              <dt>Date</dt>
              <dd>{{ scheduleTemp[type.Id].DateTime | date:'MMM dd yyyy' }}</dd>
              <dt>Time</dt>
              <dd>{{ scheduleTemp[type.Id].DateTime | date:'HH:mm' }}</dd>
            </dl>
          </div>

          <div class="form-group">
            <label for="Amount">Fee</label>
            <dl>
            <dd>{{ feeTemp[type.Id].Amount | currency:'Rp. ' }}</dd>
            </dl>
          </div>

        </dd>
      </dl>
      <error-widget field="errors.MakeUpTestType"></error-widget>
    </div>

    <button type="submit" class="btn btn-primary" >Submit</button>
  </form>
</div>

<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="formAdd">
  <div style="padding:20px">
  <h3>Add Schedule <a href="" ng-click="formAdd = !formAdd"><i class="simple-icon-close"></i></a></h3>
    <hr>

    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <form name="mtForm" role="form" ng-submit="addSchedule()">

          <div class="form-group">
            <div class="row">
              <!-- <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div class="form-group">
                  <label for="CourseType">Course Type</label>
                  <select name="CourseType" class="form-control" id="CourseType" ng-model="filterTable.CourseType.Id" ng-options="coursetype.Id as coursetype.Code +' - '+ coursetype.Name for coursetype in coursetypes" required ng-disabled="termSelected" ng-change="callTerm()">
                    <option value="" ng-hide="filterTable.CourseType.Id">Select a Course Type.</option>
                  </select>
                </div>
              </div> -->
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="form-group">
                  <label for="TermId">Term</label>
                  <select name="TermId" class="form-control" id="TermId" ng-model="scheduleNew.Term.Id" ng-options="term.Id as formatTerm(term) group by term.Year for term in terms" required ng-disabled="termSelected">
                    <option value="" ng-hide="scheduleNew.Term.Id">Select Term.</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group" ng-click="openDatepicker($event, 0)">
            <label for="">Date</label>
            <div class="input-group">
              <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="timepicker.timeA" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
              <span class="form-control">{{ timepicker.timeA | date: 'dd MMMM yyyy' }}</span>
              <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
          </div>

          <div class="form-group">
            <label for="">Time</label>
            <timepicker ng-model="timepicker.timeA" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="timepicker.isMeridian"></timepicker>
          </div>

          <button type="submit" class="btn btn-primary" >Submit</button>
        </form>
      </div>
    </div>
    <!-- <a href="" class="btn btn-primary" ng-click="openModal(payment)">New Detailed Contact</a> -->
  </div>
</pageslide>